
// import React, { Component } from 'react';
// import '../index.css';
// import * as THREE from 'three';    //引入three基础相关的所有模块
// import { Scene } from 'three';
// import Stats from 'three/examples/js/libs/stats.min.js';  //引入状态监测
// import TWEEN from "@tweenjs/tween.js";
// import * as dat from 'dat.gui'; 
// import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';  // 控制器：鼠标控制旋转
// import { Lut } from 'three/examples/jsm/math/Lut.js';  // 颜色条
// import {connect} from 'react-redux';


// const ThreeBSP = require('three-js-csg')(THREE);
// let scene, scene1, renderer, camera, orthoCamera;   //  主要内容添加在scene中，颜色条在scene1中
// let group;   // group放管道


// class ThreeShowDemo extends Component {
//   constructor(props){
//     super(props);
//     this.state = {
//       zData:[],  // x轴数据（红），深度
//       yData:[],   // y轴数据（绿），左右偏差
//       xData:[],   // z轴数据（蓝），上下偏差
//       curve:[]
//     };
//     this.handleAddCurve=this.handleAddCurve.bind(this);
// }

// componentWillReceiveProps(nextProps){
//   if(nextProps.docData!==this.props.docData){
//     console.log("渲染三维啦",nextProps.docData);
//     const docData=nextProps.docData;
//     var xData;
//     var yData;
//     var zData;
//     var curve;
//     if(docData.doc_type === '纯数据文件'){
//       zData = docData.yData
//       docData.curves.map((item)=>{
//         if(item.curve_name==='上下偏差'){
//           xData = item.xData
//         }else if(item.curve_name==='左右偏差'){
//           yData = item.xData
//         }else if(item.curve_name==='伽马'){//设置被选曲线初始值为伽马
//           curve = item.xData
//         }
//       })
//       this.setState({
//         xData,
//         yData,
//         zData,
//         curve
//       },()=>{
//         console.log("销毁前的scene",scene,group)
//         scene.remove(group);   // 先销毁之前的
//         //scene = null;
//         console.log("销毁后的scene",scene,group)
//         this.initThree();   // 再重新渲染
//       });
//     }
//   }
//   if(nextProps.selectedCurve!==this.props.selectedCurve){    // 如果选中曲线已变化，重新添加曲线并渲染。
//     console.log("更改曲线",nextProps.selectedCurve)
//     this.handleAddCurve();
//     this.initThree();
//   }
// }

// handleAddCurve=()=>{// 获取曲线数据以对井轨着色
//   const curve_id=this.props.threeDimData.selectedCurve;
//   const docData=this.props.docData;
//   if(docData.doc_type === '纯数据文件'){
//     docData.curves.map(item=>{
//       if(item.curve_id===curve_id){
//          this.setState({
//            curve:item.xData
//          });
//       }
//     })
//   }
// //   else if(docData.doc_type === '绘图文件'){
// //     docData.docData.curves.map((item)=>{
// //       if(item.curve_id===curve_id){
// //         console.log('chenggong');
// //         this.setState({
// //           curve:item.xData
// //         },console.log('curve的数据',this.state.curve))
// //       }

// //     })
// //  }
// }

// initThree = () => {   // 初始化，准备数据  四大组件：场景、相机、渲染器、几何体
//   var xcurveData=this.state.xData, 
//       ycurveData=this.state.yData, 
//       zcurveData=this.state.zData,//接收到的井轨的三位坐标
//       curveData=this.state.curve;//接受到的选中的曲线数据
//       console.log('所选曲线数据',xcurveData,ycurveData,zcurveData,curveData);
//   //对曲线数据进行归一化操作
//   let min=Math.max(...curveData);
//   let max=Math.min(...curveData);
//   let newCurveData=curveData.map(item=>((item-min)/(max-min)).toFixed(2));
//   console.log('归一化处理后的新曲线数据',newCurveData);

//   threeStart();
//   // 1、初始化 场景sence
//   function initScene() {    
//     scene = new THREE.Scene();
//     group = new THREE.Group();
//     scene.add(group);
//     scene1 = new THREE.Scene();
//     //console.log("新定义的scene",scene,scene1);

//   }

//   // 2、初始化 相机camera  
//   function initCamera() {  
//     camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);     //（透视相机） PerspectiveCamera( fov, aspect, near, far ): 视角的度数，显示范围的宽高比，最近的距离，最远看到的距离
//     camera.position.set(150,30,80)   // 400,400,400  // 设置相机 的位置(position/up/lookat 三个方向确定了相机的唯一位置方向)：
//     camera.up.set(0,0,1);  // 垂直于快门的一条线（相机上面）   (up与lookat两个方向一定是垂直的90度!!!!)
//     camera.lookAt(0,0,0);  // 代表一个方向，而不是一个点，(垂直于镜头的一条线)

//     orthoCamera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 1, 2 );
//     orthoCamera.position.set( 0.5, 0, 1 );
//   }

//   // 3、初始化 渲染器render
//   var width,height;
//   function initRender() {  
//     width = document.getElementById('canvas-frame').clientWidth;
//     height = document.getElementById('canvas-frame').clientHeight;
//     renderer = new THREE.WebGLRenderer({  antialias: true   });   // 如果数据量非常大，设置为false为提高性能
//     renderer.setSize(width, height);   // 设置 渲染器的大小（页面大小）
//     document.getElementById('canvas-frame').appendChild(renderer.domElement);  // 将渲染器渲染的内容添加到窗口上（固定写法）
//     renderer.setClearColor( 0x999999, 1.0);  // 设置渲染器颜色（清除时）
//     renderer.autoClear = false;   //定义渲染器是否在渲染每一帧之前自动清除其输出。
//     renderer.setPixelRatio( window.devicePixelRatio );   //设置设备像素比。避免设备上绘图模糊
//   }

//    // 4、可定义多个几何体，页面上显示的物体 都定义在此  
//   var tubeGeometry,tubeMaterial,tubeMesh,uniforms;
//   function initObject() {  
//     // 4.1、定义一个坐标系
//     // var axisHelper = new THREE.AxisHelper(600);  // 添加一个坐标系，长度为400
//     // scene.add(axisHelper);

//     // 4.2、定义一个网格辅助线
//       // var gridHelper = new THREE.GridHelper( 200, 50, 0xffffff, 0x555555 );  // 网格宽度(默认10),等分数(10)，中心线颜色(0x444444)，网格线颜色(0x888888)
//       // gridHelper.rotateOnAxis( new THREE.Vector3( 1, 0, 0 ), 90 * ( Math.PI / 180 ) );
//       // gridHelper.position.set(0,-30,20)
//       // scene.add(gridHelper);   

//     //4.3产生n-1个深度间隔的圆筒
//     let n=xcurveData.length;//n指数据个数
//     for(let i=0;i<n-1;i++){
//       //4.3.1定义一条弧线
//       let points=[];
//       points.push(new THREE.Vector3(xcurveData[i],ycurveData[i],zcurveData[i]));
//       points.push(new THREE.Vector3(xcurveData[i+1],ycurveData[i+1],zcurveData[i+1])); 
//       let curve=new THREE.CatmullRomCurve3(points);
//       var geometry = new THREE.Geometry();
//       //THREE.SplineCurve3().getPoints(divisions)：该方法返回一个Vector3数组，把曲线分为divisions段，返回每个点的坐标数组。上面的例子就是通过getPoint(50)返回曲线上,50等分点的坐标，然后通过这些坐标构建一条曲线。
//       geometry.vertices = curve.getPoints(500);
//       var material = new THREE.LineBasicMaterial({color : 0xff9800, linewidth : 4,linejoin: 'round'});
//       var line = new THREE.Line(geometry, material);
//       group.add(line);   // scene !!!!!!!

//       //4.3.2沿着一条曲线拉伸出一条管
//       tubeGeometry = new THREE.TubeGeometry(curve,20,4,30,false);  // (path:指定管的路径(SplineCurve3对象) ,segments:构成管的分段数(这里应该写深度，一个深度为一段) ,radius:管的半径 ,radiusSegments:管沿圆周方向的分段 ,closed:管两端是否闭合 )
//       //根据归一化后所选曲线的值的大小判断该段应选材质，标定不同区间不同颜色
//       // var color1 = ['red','yellow','green','orange','blue']   // 管道填充颜色
//       // tubeMaterial = new THREE.MeshBasicMaterial({
//       //   color: color1[parseInt(newCurveData[i]/0.2)]  //[0,0.2),[0.2,0.4),...,[0.8,1)
//       // });
//       // tubeMesh = new THREE.Mesh(tubeGeometry, tubeMaterial); 
//       // scene.add(tubeMesh);
//       if(newCurveData[i]>=0&&newCurveData[i]<0.2){
//         tubeMaterial = new THREE.MeshBasicMaterial({
//           color: 'red',
//           side: THREE.DoubleSide
//         });
//         tubeMesh = new THREE.Mesh(tubeGeometry, tubeMaterial); 
//         group.add(tubeMesh);     // scene !!!!!!!
//       }else if(newCurveData[i]>=0.2&&newCurveData[i]<0.4){
//         tubeMaterial = new THREE.MeshBasicMaterial({
//           color: 'orange',
//           side: THREE.DoubleSide
//         });
//         tubeMesh = new THREE.Mesh(tubeGeometry, tubeMaterial); 
//         group.add(tubeMesh);     // scene !!!!!!!

//       }else if(newCurveData[i]>=0.4&&newCurveData[i]<0.6){
//         tubeMaterial = new THREE.MeshBasicMaterial({
//           color: 'yellow',
//           side: THREE.DoubleSide
//         });
//           tubeMesh = new THREE.Mesh(tubeGeometry, tubeMaterial); 
//           group.add(tubeMesh);     // scene !!!!!!!

//       }else if(newCurveData[i]>=0.6&&newCurveData[i]<0.8){
//         tubeMaterial = new THREE.MeshBasicMaterial({
//           color: 'green',
//           side: THREE.DoubleSide
//         });
//           tubeMesh = new THREE.Mesh(tubeGeometry, tubeMaterial); 
//           group.add(tubeMesh);     // scene !!!!!!!
//       }else{
//         tubeMaterial = new THREE.MeshBasicMaterial({
//           color: 'blue',
//           side: THREE.DoubleSide
//         });
//           tubeMesh = new THREE.Mesh(tubeGeometry, tubeMaterial); 
//           group.add(tubeMesh);     // scene !!!!!!!
//       }

//       //  实时更新材质
//       tubeGeometry.verticesNeedUpdate = true;
//       tubeGeometry.elementsNeedUpdate = true;
//       tubeGeometry.morphTargetsNeedUpdate = true;
//       tubeGeometry.uvsNeedUpdate = true;
//       tubeGeometry.normalsNeedUpdate = true;
//       tubeGeometry.colorsNeedUpdate = true;
//       tubeGeometry.tangentsNeedUpdate = true;
//     }      
//   } 

//   // 初始化 灯光 
//   function initLight() {  
//     var light1 = new THREE.AmbientLight(0x999999);
//     light1.position.set(0, 0, 0);
//     scene.add(light1);    
//     const pointLight = new THREE.PointLight( 0xffffff, 1 );
//     camera.add( pointLight );  
//   }

//   // 初始化tween,移动 相机/物体 位置
//   function initTween() {  
//     new TWEEN.Tween(camera.position)  // 相机位置
//       .to({x:1000},3000)     // 3秒内将相机位置x改变为400
//       .repeat(Infinity)  // 重复：一直重复
//       .start();   // 开始
//   }
 
//   //辅助工具(xyz坐标线)
//   var helper = new THREE.AxesHelper(200);
//   helper.position.set(0,-30,20);
//   scene.add(helper);    

//   //控制器
//   var controls;
//   function controls() {   
//     controls = new OrbitControls( camera, renderer.domElement );
//     controls.minDistance = 20; 
//     controls.maxDistance = 600;
//     controls.addEventListener( 'change', animation );   // 监控，改变后重新渲染
//   }

//   // 颜色条
//   var lut,sprite;
//   function updateColors() {   
//     lut = new Lut();
//     var map = new THREE.CanvasTexture( lut.createCanvas() )
//     var spriteMaterial = new THREE.SpriteMaterial( {map: map} ) 
//     sprite = new THREE.Sprite(spriteMaterial);
//     sprite.scale.x = 0.035;
//     sprite.scale.y = 0.5;
//     sprite.position.x = -0.45;
//     sprite.position.y = 0.25;   // 0.65在左上角
//     scene1.add( sprite );    // scene1 !!!!!!!
    
//     let params = {
//       colorMap: 'rainbow',
//     };
//     lut.setColorMap( params.colorMap );
//     lut.setMax( 100 );
//     lut.setMin( 0 );
//   }

//   // 渲染函数
//   function animation() {   
//     //stats.begin();   // 检测器：监测执行一次需要的相关数据
//     renderer.clear();  // 清除 颜色、深度、模板 缓存
//     renderer.render(scene, camera);    // 通过场景sence和相机crame一起，用 渲染器 渲染出来     // scene !!!!!!!

//     //renderer.clearDepth();  // 清除深度缓存
//     renderer.render(scene1, orthoCamera);    // scene1 !!!!!!!

//     requestAnimationFrame(animation);  // 当render函数空闲时，不断地调用该函数进行渲染，（可实现渲染效果）
//     //stats.end();
//   }

//   function threeStart(){
//     initScene();   // 场景
//     initCamera();  // 相机
//     initRender();  // 渲染器
//     initObject();  // 几何体
//     initLight(); // 光
//     animation();  // 渲染函数 
//     initTween();  // 动画：移动相机位置
//     controls();  //控制器：鼠标控制方向和大小
//     updateColors();   // 颜色条
//     // createUI();
//   }
//   window.addEventListener( 'resize', this.onWindowResize, false );
// };

// onWindowResize = () => {   // 窗口自适应
//   camera.aspect = window.innerWidth / window.innerHeight;
//   camera.updateProjectionMatrix();
//   // if(document.getElementById('canvas-frame').clientWidth){
//   //   renderer.setSize( document.getElementById('canvas-frame').clientWidth , document.getElementById('canvas-frame').clientHeight );
//   // }
//   // this.render();
// }

// /**
//  * 开始Three
//  *
//  * @memberof ThreeBim
//  */
// componentDidMount(){
//   this.initThree();
// }



// render() {
//   return (
//    <div id='canvas-frame' style={{backgroundColor:'red',width:'100%',height:'100%'}}>     </div>
//   );
// }
// }

 
// export default connect(
//   state => ({ docData:state.docData,threeDimData:state.threeDimData }),
//   {}
// )(ThreeShowDemo);






























































import React , { Component } from 'react';
import { Modal,message } from 'antd';
import {connect} from 'react-redux';
import {setEditDepthData1,getCurvesIntoDao1,getDaosMb1,initDaosDataList1,initdocData,initmbData,setDocInReducer,setMbInReducer,doNull} from '../../../redux/actions';   //,getDaosMbShow
import SelectFileForm from '../../../components/Modal/select-file-form';
import AddFolderForm from '../../../components/Modal/add-folder-form';
import {removeDocDataList,removeDepthData,setDocDataList} from '../../../utils/storageUtils';

import {reqProcessDocDataList,reqProcessMbData} from '../../../api';
import html2canvas from 'html2canvas';
import SplitPane from 'react-split-pane';
import ThreeShowDemo from '../../../components/three/three_show_demo';   // 管道 实例
//import Three1 from '../../../components/three/three1';

 
class ThreeDimShow extends Component {  

  state = {
    visible: '0',
    docId: '',   // 存储文件id
    curves_mb: []
  }

  openFileShow = () => {    // 添加数据文件 弹框显示
    this.setState({
      visible: '1'
    });
  };
  handleOpenFile = async() => {    // 添加数据文件 响应函数 
    this.setState({ visible: '0'});
    var docInfo;
    const doc_id = this.formRef.current.getFieldValue('doc_id');
    this.docList.map((item) => {
      if(item.doc_id === doc_id){
        docInfo = item
      }
    });
    const doc_type = docInfo.doc_type;
    const drill_id = docInfo.drill_id;
    const org_id = docInfo.org_id;
    const ws_id = docInfo.ws_id;
    //console.log("选择文件成功",doc_id,docInfo);
    if(doc_type === "纯数据文件"){
      const result = await reqProcessDocDataList(doc_id,doc_type,drill_id,org_id,ws_id);  // 根据文件id获取 数据文件
      //console.log("获取纯数据文件result：",result);
      if(result.code === 200){
        const docDatasList = result.data;
        if(docDatasList.rock_curve){
          docDatasList.curves.push(docDatasList.rock_curve);    // 将岩性曲线 推入 曲线数组中
        }
        console.log("所有的曲线1：",docDatasList.curves);
        const checkOnLeaf = {key: docInfo.doc_id, title: docInfo.title, type: docDatasList.doc_type, curves: docDatasList.curves};
        const docStartDepth = docDatasList.start_depth;  //文件起深
        const docEndDepth = docDatasList.end_depth;      // 文件终深
        const docInterval = docDatasList.interval;       // 深度间隔
        this.props.setEditDepthData1(Number(docStartDepth),Number(docEndDepth),Number(docInterval));   // 读取文件的 起深、终深、深度间隔，并更新
        if(checkOnLeaf.curves){
          if(this.state.curves_mb.length != 0){  // 用户在选择文件之前已经导入模板
            const data = checkOnLeaf.curves;
            this.props.getCurvesIntoDao1(data);  // 将 纯数据曲线 传入模板中  vvvvvvvvv
            this.props.setDocInReducer(docDatasList);  // 将文件保存到reducer  vvvvvvvv
            //this.props.isUpdatePages(!this.props.updatePages);  // 及时更新页面(导入模板页面)
            setDocDataList(docDatasList);  // 将获取到的 文件数据 放入内存  
          }else{  // 用户没有选择模板
            if(this.props.defaultmbData.mb_id){  // 有默认模板,则自动导入默认模板
              const mbData = this.props.defaultmbData;
              const data = checkOnLeaf.curves;
              this.props.getDaosMb1(mbData.mb_dao);   // 将 默认模板 载入
              this.props.getCurvesIntoDao1(data);  // 将 纯数据曲线 传入模板中  vvvvvvvvv
              this.props.setDocInReducer(docDatasList);  // 将文件保存到reducer  vvvvvvvv
              this.props.setMbInReducer(mbData);  // 保存当前模板(完整的)
              //this.props.isUpdatePages(!this.props.updatePages);  // 及时更新页面(导入模板页面)
              setDocDataList(docDatasList);  // 将获取到的 文件数据 放入内存
            }else{
              message.error("请先选择模板或设置默认模板！");
            }
          }
        }
      }else{
        message.error("数据获取异常！");
      }
    }else if(docInfo.doc_type === "绘图文件"){   //  绘图文件暂时还没有接
      const result = await reqProcessDocDataList(doc_id,doc_type,drill_id,org_id,ws_id);  // 根据文件id获取 绘图文件
      console.log("绘图文件",result)
      if(result.code === 200){
        const docDatasList = result.data;
        docDatasList.docData.curves.push(docDatasList.docData.rock_curve);   // 将岩性曲线 放入 曲线数组中
        const checkOnLeaf = {key: docInfo.doc_id, title: docInfo.title, type: docDatasList.doc_type, curves: docDatasList.docData.curves};
        const docStartDepth = docDatasList.docData.start_depth;  //文件起深
        const docEndDepth = docDatasList.docData.end_depth;      // 文件终深
        const docInterval = docDatasList.docData.interval;       // 深度间隔
        this.props.setEditDepthData1(Number(docStartDepth),Number(docEndDepth),Number(docInterval));   // 读取文件的 起深、终深、深度间隔，并更新
        if(checkOnLeaf.curves){
          if(this.state.curves_mb.length === 0){  // 没有导入模板     
            //1、导入模板mbData
            const mbData = docDatasList.mbData;
            this.props.getDaosMb1(mbData.mb_dao);   // 将 绘图文件 的 模板部分 先载入
            //2、导入数据docData
            const docData = docDatasList.docData;
            this.props.getCurvesIntoDao1(docData.curves);    // 将 绘图文件 的 纯数据部分 载入  vvvvvvvv
            this.props.setDocInReducer(docDatasList);  // 将绘图文件保存到reducer  vvvvvvvvvvvv
            //this.props.isUpdatePages(!this.props.updatePages);  // 及时更新页面(导入模板页面)
            setDocDataList(docDatasList);  // 将获取到的 绘图文件数据 放入内存
            //console.log("绘图文件",mbData,docData)
          }else{
            message.error("请勿导入模板！");
          }
        }
      }else{
        message.error("数据获取异常！");
      }
    }
  }; 

  addFolderShow = () => {    // 添加模板 弹框显示  
    this.setState({
      visible: '2'
    });
  };
  handleAddFolder = async() => {    // 添加模板 响应函数  
    this.setState({  visible: '0' });
    const mb_id = this.formRef.current.getFieldValue('mb_id'); 
    const result = await reqProcessMbData(mb_id);  
    console.log("获取模板",result);
    if(result.code === 200){
      const curves_mb = result.data.mb_dao;
      this.setState({curves_mb},() => console.log("模板名称：",mb_id,curves_mb)) 
      this.props.getDaosMb1(curves_mb);   // 将道模板先加载到页面中
      this.props.setMbInReducer(result.data);  // 保存当前模板(完整的) :  result.data
    }else{
      message.error("模板获取失败！");
    }    
  }; 

  handleCancel = () => {    // 对话框取消按钮
    this.setState({
      visible: '0'
    }); 
  };

  handlesaveDocPic = async() => {    // 另存为图片   vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
    document.getElementsByClassName('iconfont')[1].style.display='none';
    const newCanvas = document.createElement("canvas");
    const element = document.querySelector('.content-left');

    const dom_width = parseInt(window.getComputedStyle(element).width);
    const dom_height = parseInt(window.getComputedStyle(element).height);
    console.log(dom_width)
    console.log(dom_height)
    //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
    newCanvas.width = dom_width * 2;
    newCanvas.height = dom_height * 2;
    newCanvas.style.width = dom_width + "px";
    newCanvas.style.height = dom_height + "px";
    const context = newCanvas.getContext("2d");
    context.scale(1.8, 1.8);
    html2canvas(element, { canvas: newCanvas }).then((canvas) => {
        const imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
        const base64ToBlob = (code) => {
            let parts = code.split(';base64,');
            let contentType = parts[0].split(':')[1];
            let raw = window.atob(parts[1]);
            let rawLength = raw.length;
      
            let uInt8Array = new Uint8Array(rawLength);
      
            for (let i = 0; i < rawLength; ++i) {
              uInt8Array[i] = raw.charCodeAt(i);
            }
            return new Blob([uInt8Array], {type: contentType});
        };
        const blob = base64ToBlob(imgUri);
        // window.location.href = imgUri; // 下载图片
        // 利用createObjectURL，模拟文件下载
        const fileName = '三维展示图.png';
        if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, fileName);
        } else {
            const blobURL = window.URL.createObjectURL(blob)
            const vlink = document.createElement('a');
            vlink.style.display = 'none';
            vlink.href = blobURL;
            vlink.setAttribute('download', fileName);

            if (typeof vlink.download === 'undefined') {
                vlink.setAttribute('target', '_blank');
            }

            document.body.appendChild(vlink);

            var evt = document.createEvent("MouseEvents");
            evt.initEvent("click", false, false);
            vlink.dispatchEvent(evt);

            document.body.removeChild(vlink);
            window.URL.revokeObjectURL(blobURL);
        }
    });
    setTimeout(()=>{
      document.getElementsByClassName('iconfont')[1].style.display='block';
    }) 
  }; 

  componentWillUnmount(){    // 换页的时候会被调用
    //console.log("即将被卸载！");
    removeDocDataList();  // 清空 内存中的文件
    removeDepthData();  // 清空 内存中的 初始深度
    this.props.initDaosDataList1([]); // 清空 reducer中的 模板数据
    this.props.initdocData({});  // 清空 reducer中的 文件
    this.props.initmbData([]);   // 清空 reducer中的 模板
    this.props.doNull(!this.props.isDoNull);   // 清空侧边栏
  }

  render() {
    const {visible} = this.state;
    return (
      <div className="depth-two-dim-wrapper">
            <Modal
              title="选择数据文件"
              visible={visible === '1'}
              onOk={this.handleOpenFile}
              onCancel={this.handleCancel}
              destroyOnClose={true}  // 关闭时销毁子元素
              okText="确定"
              cancelText="取消"
            >
              <SelectFileForm 
                setForm = {(formRef) => {this.formRef = formRef}}  
                setDocList = {(docList) => {this.docList = docList}}
              /> 
            </Modal>

            <Modal
              title="添加模板"
              visible={visible === '2'}
              onOk={this.handleAddFolder}
              onCancel={this.handleCancel}
              okText="确定"
              cancelText="取消"
              destroyOnClose={true}
            >
              <AddFolderForm setForm = {(formRef) => {this.formRef = formRef}}/> 
            </Modal>
        <div className="content" style={{position:'relative'}}>
        {/* <i className="iconfont "  onClick={()=>{window.location.reload()}} style={{cursor:'pointer',marginRight:'5px'}}>&#xe710;</i> */}
        <i className="iconfont icon" onClick={this.handlesaveDocPic} style={{position:'absolute',top:0,left:0}}>&#xe604;</i>
           <SplitPane split="vertical">
            <div className="content-left" style={{padding:0,paddingRight:0}}>
              
              {console.log("select",this.props.selectedCurveShow)}     {/*可以读取选中的曲线 以井眼轨迹为轴心展示     ThreeShowDemo  */} 
              {this.props.docData.doc_id?<ThreeShowDemo 
                selectedCurve={this.props.threeDimData.selectedCurve}
                tag={this.props.threeDimData.tag}
              />:null}              
            </div>
            {/* <div className="content-right">
              
            </div> 
            <div className="show-content"> 
                <DaoDemo1 daosDataList={this.props.defaultmbData.mb_dao} />  
              </div>  */}
          </SplitPane>     
        </div>
      </div> 
    )    
  }
}

export default connect(
  state => ({  docData: state.docData,threeDimData:state.threeDimData,daosDataList: state.daosDataList,selectedCurveShow1: state.selectedCurveShow1, defaultmbData: state.defaultmbData, isDoNull: state.isDoNull}),  // 获取 数据处理页面列表，没有传入曲线数据前，获取的是 道列表，也就是默认模板
  {setEditDepthData1,getCurvesIntoDao1,getDaosMb1,initDaosDataList1,initdocData,initmbData,setDocInReducer,setMbInReducer,doNull}        //getDaosMbShow,
)(ThreeDimShow);
